<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>首页 - url2sql</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css">
<!-- Le styles -->
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}
.tools{
  display: none;
  height: 15px;
}
.tools i:hover {
  background-color: rgba(255, 0, 0, .25);
}
.page-header h1 .tools{
  float: right;
}
</style>
<link rel="stylesheet" href="./css/bootstrap-responsive.min.css"
  type="text/css">
  
<script type="text/javascript" src="./js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="./js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>

<body>

<script include='header.html'></script>

  <div class="container-fluid">
     <div id="main">
	    <div class="page-header">
	      <div id="msg">
	      </div>
	      <table class="table table-bordered table-striped" id="table">
	        <tr>
	          <th>路径</th>
	          <th>数据校验</th>
	          <th>拦截JS</th>
	          <th style="width: 70px;">状态</th>
	          <th style="width: 70px;">操作</th>
	        </tr>
	      </table>
	    </div>
  	</div>
	
	<script type="text/tmpl" id="url2sql-tmpl">
	{{each data}}
	   <tr>
	    <td>${path}</td>
	    <td>${v}</td>
	    <td>${js}</td>
	    <td>
			{{if status==1}}
		        <span class="badge badge-success">启用</span>
			{{else}}
		        <span class="badge badge-warning">禁用</span>
			{{/if}}
		</td>
	    <td>
	      <span class="tools" sign="url2sql" index="${$index }">
	        <i class="icon-pencil" title="修改"></i>
	        <i class="icon-remove" title="删除"></i>
	        <i class="icon-eye-open" title="预览"></i>
	      </span>
	    </td>
	  </tr>
	{{/each}}
	</script>
    <footer>
      <p>Say:后端是前端的Mysql.<a class="btn" style="float: right;" id="addTableButton">增加</a></p>
    </footer>
  </div>
  
  
  <div class="modal hide" id="deleteDialg">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">×</a>
      <h3 sign="title">确定删除</h3>
    </div>
    <div class="modal-body">
      <p sign="content">确定删除吗？</p>
    </div>
    <div class="modal-footer">
      <a class="btn" data-dismiss="modal">关闭</a>
      <a sign="ok" class="btn btn-primary">确定</a>
    </div>
  </div><!-- 删除对话框完毕 -->
  
  
  <div class="modal hide" id="editDialg">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">×</a>
      <h3 who="title">修改</h3>
    </div>
    <div class="modal-body">
      <div>
          <input sign="path" class="input-xlarge" name="" style="width:70%" placeholder="路径" title="路径"/>   
          <span sign="status" class="badge badge-success" style="float: right;">启用</span>
      </div>
      <div>
          <input sign="v" class="input-xlarge" name="" style="width:100%" placeholder="数据验验" title="数据验验"/>   
      </div>
      <div>
          <textarea sign="js" class="input-xlarge" name="" style="width:100%;height: 150px;" placeholder="拦截JS" title="拦截JS"></textarea>   
      </div>
    </div>
    <div class="modal-footer">
      <a data-dismiss="modal" class="btn">关闭</a>
      <a who="ok" class="btn btn-primary">确定</a>
    </div>
  </div><!-- editDialg结束 -->
  
  
  <script type="text/javascript" src="./js/url2sql.js"></script>
  
  <script type="text/javascript">
  var callback = null;
  (function(window){
	var table={}, url2sql={};
  	callback = function(json){
  		table = json.data;
  		$('#url2sql-tmpl').tmpl(json).appendTo($('#table'));
  	}
  	
  	//事件
  	$(function(){
  		
  		//删除OK
  		$('.tools .icon-remove').live('click', function(){
  			var $this = $(this);
  			var index = $this.parent().attr('index');
  			var data = table[index];
  			var msg = {};
			msg.title = "删除Url:" + data.path;
			msg.content = "确定要删除该URL及其对应的SQL吗"
			msg.url = "deletePath.json?id=" + data.id;
			msg.parent = $this.parents('tr');
				
  			//显示对话框
  			Dialg.del(function(){
  				$.getJSON(msg.url, function(json){
  					if(json.code==0){
	  					msg.parent.remove();
  					}else{
  						alert('操作失败');
  					}
  				});
  			}, msg.content, msg.title);
  		});
  		
  		var url2sqlEdit = function(data){
  			var isAdd = ((typeof data)=="undefined");
  			Dialg.edit(function(json){
  				var url = "";
  				if(isAdd){
  					url = "addPath.json";
  				}else{
  					json.id = data.id;
  					url = "updatePath.json";
  				}
	  			var retVal = false;
  				$.ajax({
  					'async' : false,
  					'type' : "post",
  					'url' : url,
  					'data' : json,
  					'dataType' : 'json',
  					'success' : function(json){
  						if(json.code==0){
	  						retVal = true;
  						}
  					}
  				});
  				if(!retVal){
  					alert('保存失败');
  				}else{
  					window.location.reload();
  				}
  				return retVal;
  			}, data);
  		};
  		$('table .icon-pencil').live('click', function(){
  			var index = $(this).parent().attr('index');
  			url2sqlEdit(table[index]);
  		});
  		$('#addTableButton').click(function(){
  			url2sqlEdit();
  		});
  		
  		//预览
		function getUrl(data){
		 var regex = /\${(.*?)}/g;
		 var regex2 = /\${(.*?)}/;
		    var array = data.js.match(regex);
		    if(array && array.length!=0){
		  	  var param = [];
		  	  var max = -1;
		  	  for(var i=0;i<array.length; i++){
		  		  var t = array[i];
		  		  var name = t.match(regex2)[1];
		  		  if(name == parseInt(name)){
		  			  var temp = parseInt(name);
		  			  if(temp > max){
		  				  max = temp;
		  			  }
		  			  
		  		  }else{
		   		  param.push(name+"=");
		  		  }
		  	  }
		  	  var rest = "";
		  	  for(var i=0; i<= max; i++){
		  		  rest = rest + "_" + i;
		  	  }
		  	  return data.path + rest + ".json?" + param.join("&");
		    }
		    return data.path+".json";
		}
  		$('.icon-eye-open').live('click', function(){
  			var index = $(this).parent().attr('index');
  			var url=getUrl(table[index]);
  			console.log(url);
  		});
  	}); //事件结束 
  })(window);
  </script>
</body>
</html>
